<template>
  <el-aside :width="collapsed ? '64px' : '240px'" class="app-sidebar">
    <el-menu
      :default-active="activeMenu"
      :collapse="collapsed"
      :unique-opened="true"
      router
      class="sidebar-menu"
    >
      <!-- 仪表板 -->
      <el-menu-item index="/dashboard">
        <el-icon><Odometer /></el-icon>
        <template #title>仪表板</template>
      </el-menu-item>

      <!-- 茶叶管理 -->
      <el-sub-menu index="batches" v-if="canAccessBatches">
        <template #title>
          <el-icon><Coffee /></el-icon>
          <span>茶叶管理</span>
        </template>
        <el-menu-item index="/batches">
          <el-icon><List /></el-icon>
          <template #title>批次列表</template>
        </el-menu-item>
        <el-menu-item index="/batches/create" v-if="canCreateBatch">
          <el-icon><Plus /></el-icon>
          <template #title>创建批次</template>
        </el-menu-item>
      </el-sub-menu>

      <!-- 溯源查询 -->
      <el-menu-item index="/trace">
        <el-icon><Search /></el-icon>
        <template #title>溯源查询</template>
      </el-menu-item>

      <!-- 数据统计 -->
      <el-menu-item index="/statistics" v-if="canViewStatistics">
        <el-icon><DataAnalysis /></el-icon>
        <template #title>数据统计</template>
      </el-menu-item>

      <!-- 用户管理 (仅管理员) -->
      <el-sub-menu index="admin" v-if="isAdmin">
        <template #title>
          <el-icon><User /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/users">
          <el-icon><UserFilled /></el-icon>
          <template #title>用户管理</template>
        </el-menu-item>
        <el-menu-item index="/system/settings">
          <el-icon><Setting /></el-icon>
          <template #title>系统设置</template>
        </el-menu-item>
      </el-sub-menu>

      <!-- 个人中心 -->
      <el-sub-menu index="profile">
        <template #title>
          <el-icon><Avatar /></el-icon>
          <span>个人中心</span>
        </template>
        <el-menu-item index="/profile">
          <el-icon><Edit /></el-icon>
          <template #title>个人资料</template>
        </el-menu-item>
        <el-menu-item index="/profile/security">
          <el-icon><Lock /></el-icon>
          <template #title>安全设置</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>

    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="toggleCollapse">
      <el-icon>
        <component :is="collapsed ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>
  </el-aside>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import {
  Odometer,
  Coffee,
  List,
  Plus,
  Search,
  DataAnalysis,
  User,
  UserFilled,
  Setting,
  Avatar,
  Edit,
  Lock,
  Expand,
  Fold
} from '@element-plus/icons-vue'

// Props
defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['toggle-collapse'])

const route = useRoute()
const authStore = useAuthStore()

// 状态
const activeMenu = ref('')

// 计算属性
const user = computed(() => authStore.user)
const userRole = computed(() => user.value?.role)

const isAdmin = computed(() => userRole.value === 'admin')
const isFarmer = computed(() => userRole.value === 'farmer')
const isLogistics = computed(() => userRole.value === 'logistics')
const isMerchant = computed(() => userRole.value === 'merchant')

const canAccessBatches = computed(() => {
  return ['farmer', 'logistics', 'merchant', 'admin'].includes(userRole.value)
})

const canCreateBatch = computed(() => {
  return ['farmer', 'admin'].includes(userRole.value)
})

const canViewStatistics = computed(() => {
  return ['farmer', 'logistics', 'merchant', 'admin'].includes(userRole.value)
})

// 监听路由变化，更新激活菜单
watch(
  () => route.path,
  (newPath) => {
    // 处理特殊路径
    if (newPath.startsWith('/batches/') && newPath !== '/batches/create') {
      activeMenu.value = '/batches'
    } else if (newPath.startsWith('/trace/')) {
      activeMenu.value = '/trace'
    } else if (newPath.startsWith('/profile/')) {
      activeMenu.value = '/profile'
    } else {
      activeMenu.value = newPath
    }
  },
  { immediate: true }
)

// 方法
const toggleCollapse = () => {
  emit('toggle-collapse')
}
</script>

<style scoped>
.app-sidebar {
  background: white;
  border-right: 1px solid #e4e7ed;
  position: relative;
  transition: width 0.3s;
  height: 100%;
  flex-shrink: 0;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  width: 100%;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.collapse-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.collapse-btn:hover {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

/* 深色主题适配 */
.dark .app-sidebar {
  background: #2b2f3a;
  border-right-color: #414243;
}

.dark .collapse-btn {
  background: #414243;
  border-color: #414243;
  color: #a3a6ad;
}

.dark .collapse-btn:hover {
  background: #409eff;
  color: white;
  border-color: #409eff;
}
</style>